import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:seedfour/app/views/module_main/main_mine/widget/mine_personal.dart';
import 'package:seedfour/app/views/module_main/main_mine/widget/mine_property.dart';
import 'package:seedfour/app/views/module_main/main_mine/widget/mini_group.dart';
import 'package:seedfour/app/widget/tag.dart';

import '../../../constants.dart';
import '../../../theme.dart';
import 'logic.dart';

class MinePage extends StatelessWidget {
  MinePage({Key? key}) : super(key: key);

  final logic = Get.put(MineLogic());
  final state = Get.put(MineLogic()).state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      body: Column(
        children: [
          MinePersonal(
            data: state,
            onChangeRole: () => _showBottomSheet(),
            onClickSetting: () => logic.onClickSetting(),
          ),
          SizedBox(height: kSpaceLarge),
          SizedBox(height: kSpaceLarge),
          MineProperty(
            data: state,
            onClickBalance: () => logic.onClickBalance(),
            onClickDeposit: () => logic.onClickDeposit(),
            onClickFund: () => logic.onClickFund(),
            onClickIncome: () => logic.onClickIncome(),
            onClickAlloc: () => logic.onClickAlloc(),
            onClickExpense: () => logic.onClickExpense(),
          ),
          Obx(
            () => state.role.value != 'me'
                ? Container()
                : Container(
                    color: Colors.white,
                    child: Container(
                      margin: EdgeInsets.all(kSpaceMedium),
                      height: 0.5.w,
                      color: AppColor.colorLineGrey,
                    ),
                  ),
          ),
          Obx(
            () => state.role.value != 'me'
                ? Container()
                : Expanded(
                    child: MineGroup(
                      onClickTeam: () => logic.onClickTeam(),
                      onClickInvite: () => logic.onClickInvite(),
                    ),
                  ),
          ),
          // Expanded(
          //   child: ListView(
          //     children: [
          //     ],
          //   ),
          // ),
        ],
      ),
    );
  }

  // 底部单选弹窗
  void _showBottomSheet() {
    showModalBottomSheet(
      backgroundColor: Colors.white,
      context: Get.context!,
      isDismissible: false,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(15.w)),
      ),
      builder: (context) {
        return SizedBox(
          width: double.infinity,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Padding(
                padding: EdgeInsets.only(
                  left: kSpaceMedium,
                  top: kSpaceTiny,
                  bottom: kSpaceTiny,
                  right: kSpaceTiny,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '选择账户',
                      style: TextStyle(
                        fontSize: kFontSizeMedium,
                        color: AppColor.colorFontBlack,
                      ),
                    ),
                    IconButton(
                      onPressed: () =>
                          {logic.onCancelSelectAccount(), Get.back()},
                      icon: SvgPicture.asset(
                        'assets/icons/ic_cancel_black.svg',
                        width: kIconSizeMini,
                      ),
                    ),
                  ],
                ),
              ),
              const Divider(),
              Expanded(
                child: ListView.builder(
                  itemCount: state.personalInfo.value!.companyList.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(
                        state.personalInfo.value!.companyList[index].name,
                        style: TextStyle(
                          fontSize: kFontSizeSmall,
                          color: AppColor.colorFontBlack,
                        ),
                      ),
                      subtitle: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Tag(
                            text: state.personalInfo.value!.companyList[index]
                                        .roleType ==
                                    'clicms'
                                ? '普通用户'
                                : '机构管理',
                            textColor: state.personalInfo.value!
                                        .companyList[index].roleType ==
                                    'clicms'
                                ? AppColor.colorFontGreen
                                : AppColor.colorFontOrange,
                            textSize: kFontSizeTiny,
                            backgroundColor: state.personalInfo.value!
                                        .companyList[index].roleType ==
                                    'clicms'
                                ? AppColor.colorTagGreen
                                : AppColor.colorTagOrange,
                            padding: EdgeInsets.symmetric(
                              horizontal: 6.w,
                              vertical: 3.w,
                            ),
                          ),
                          const Expanded(
                              child: SizedBox(width: double.maxFinite)),
                        ],
                      ),
                      trailing: Obx(
                        () => state.radioAccountIndex.value == index
                            ? SvgPicture.asset(
                                'assets/icons/ic_radio_selected.svg',
                                width: 16.w)
                            : SvgPicture.asset(
                                'assets/icons/ic_radio_unselect.svg',
                                width: 16.w),
                      ),
                      onTap: () => logic.onSelectAccount(index),
                    );
                  },
                ),
              ),
              const Divider(),
              Padding(
                padding: EdgeInsets.all(kSpaceMedium),
                child: Obx(
                  () => FilledButton(
                    onPressed: state.radioAccountIndex.value ==
                            state.selectedAccountIndex.value
                        ? null
                        : () => {logic.onConfirmSelectAccount(), Get.back()},
                    child: Container(
                      alignment: Alignment.center,
                      width: double.infinity,
                      height: 50.w,
                      child: Text(
                        '确认',
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: kFontSizeMedium),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
}
